<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-place"></i>
        用户角色授权
      </span>
    </div>
    <!-- 表单 -->
    <div class="text item">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input clearable v-model="formInline.userName" placeholder="请输入用户名/员工姓名/角色名称" style="width:290px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
					<el-button type="primary">
						高级查询
						<i class="el-icon-magic-stick"></i>
					</el-button>
				</el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" plain @click="functionality">用户角色授权</el-button>
          <el-button type="danger" plain @click="handleDeleteGroup" v-show="delGroup">
            批量删除
            <i class="el-icon-delete"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- tabel表格 -->
      <div class="el-flex el-box-column">
        <el-table
          :data="tableData"
          :default-sort="{ prop: 'date', order: 'descending' }"
          border
          stripe
          style="width: 100%"
          :pageSize="pageSize"
          @selection-change="handleSelectionChange"
          height="100%"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" fixed prop="userName" label="用户名"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="realName" label="员工姓名"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="roleName" label="角色名称"></el-table-column>
          <el-table-column prop="default" label="是否默认" align="center"></el-table-column>
          <el-table-column prop="control" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="设置默认" @click="handleDefault(scope.$index, scope.row)"><i class="el-icon-thumb"></i></el-button>
              <el-button class="td-btn-icon" type="text" title="删除" @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="nowPageNum"
        @current-change="currentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="allData.length"
      ></el-pagination>
    </div>
   <UserDialog @dialogHide="dialogHandleCheckSure" :dialogVisible="isShow"></UserDialog>
  </el-card>
</template>
<script>
import { Tree, Dialog, Table, TableColumn, Pagination, MessageBox, Message } from 'element-ui'
import UserDialog from '../../../components/userDialog'
export default {
  name: 'userRoleAuthor',
  components: {
    'el-tree': Tree, // 树形菜单
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
    'el-table-column': TableColumn, // 表格列
    'el-pagination': Pagination, // 分页
    UserDialog
  },
  data () {
    return {
      activeName: '1',
      formInline: {
        userName: '',
        region: ''
      },
      allData: [
        {
          id: 1,
          userName: 'ls',
          realName: '李四',
          roleName: '员工',
          default: '否'
        },
        {
          id: 2,
          userName: 'wx',
          realName: '王小虎',
          roleName: '员工',
          default: '是'
        }
      ],
      nowPageNum: 0,
      tableData: [],
      pageSize: 20,
      delDatas: [],
      delVisible: false, // 删除提示弹框的状态
      isShow: false

    }
  },
  mounted () {
    this.currentChange(1)
  },
  methods: {
    // 单个删除
    handleDelete (index, row) {
      MessageBox.confirm('您是否确定删除此行内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index - 1, 1)
        Message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        Message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击复选框
    handleSelectionChange (val) {
      this.delDatas = val
      // console.log(val)
    },
    // 批量删除事件
    handleDeleteGroup () {
      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.delData()
        })
        .catch(() => {})
    },
    delData () {
      var idArr = [] // 需要删除的id的数组
      this.delDatas.forEach(v => {
        idArr.push(v.id)
      })
      var length = this.allData.length // 总长度
      // 遍历总长度，边遍历边改变数组长度，方便计算索引值
      for (var i = length - 1; i >= 0; i--) {
        if (!idArr.length) break // 如果删除的数据空了 就直接break出去
        // 遍历需要删除的id数组，删除对应数据
        for (var k = 0; k < idArr.length; k++) {
          if (this.allData[i].id === idArr[k]) {
            this.allData.splice(i, 1)
            idArr.splice(k, 1)
            break
          }
        }
      }
      // this.nowPageNum
      var shouldAllPageNum = Math.ceil(this.allData.length / this.pageSize)
      var go
      if (this.allData.length === 0) go = 1
      else if (this.nowPageNum <= shouldAllPageNum) go = this.nowPageNum
      else if (this.nowPageNum > shouldAllPageNum) go = shouldAllPageNum
      this.currentChange(go)
    },
    // 修改页码
    currentChange (newPageSize) {
      this.nowPageNum = newPageSize
      console.log(newPageSize)
      var start = (newPageSize - 1) * this.pageSize
      var end = start + this.pageSize
      this.tableData = this.allData.slice(start, end)
    },
    // 设置默认
    handleDefault (index, row) {
      MessageBox.confirm('此行内容是否设为默认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Message({
          type: 'success',
          message: '设置默认成功!'
        })
      }).catch(() => {
        Message({
          type: 'info',
          message: '设置默认取消'
        })
      })
    },
    // 功能授权时间
    functionality () {
      this.isShow = true
    },
    dialogHandleCheckSure (result) {
      this.isShow = false
      if (!result) return console.log('点击了取消', result)
    }
  },
  computed: {
    delGroup () {
      if (this.delDatas && this.delDatas.length) return true
      else return false
    }
  }
}
</script>
<style lang="scss">
</style>
